<template>
  <div>
    <div class="head">
      <el-button :icon="Icon.Search" @click="showForm">供应商搜索</el-button>
      <el-button :icon="Icon.CirclePlus" @click="addForm">供应商登记</el-button>
      <el-button :icon="Icon.Edit" @click="updateForm">供应商编辑</el-button>
      <el-button :icon="Icon.Delete" @click="deleteForm">供应商删除</el-button>
    </div>

    <el-divider></el-divider>
    <el-scrollbar>
      <el-table ref="multipleTable"
                :data="tableData"
                border
                height="542px"
                row-style="height:50px"
                stripe style=" width: 100%"
                tooltip-effect="dark"
                @select="select"
                @selection-change="handleSelection">
        <el-table-column type="selection">

        </el-table-column>
        <el-table-column :index="getIndex" label="序号" type="index" width="150"/>
        <el-table-column label="供应商名称"  prop="vendorName" width="200"/>
        <el-table-column label="供应商地址" prop="vendorAddress" width="300px"/>
        <el-table-column label="邮编" prop="zip" width="100px"/>
        <el-table-column label="法人" prop="vendorJuridicalPerson" width="150px"/>
        <el-table-column label="备注" prop="note" width="250px"/>
        <el-table-column fixed="right" label="操作" prop="">
          <template #default="scope">
          <el-button  color="#97d578" plain  round size="default" @click="look(scope.row)">详细联系信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page=pageNow
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          :total=totalSize
          background
          layout="total, prev, pager, next"
          style="margin-top: 15px"
          @current-change="pageChange"
      >
      </el-pagination>


    </el-scrollbar>
    <el-dialog v-model="Visible" width="620px" draggable center title="详细联系信息">
      <span style="display: inline-block;margin-bottom: 15px; font-size: 15px">供应商联系信息:</span>
      <el-table :data="rowData" border style="width:600px" >
        <el-table-column label="联系人" prop="vendorContactPerson" width="200"/>
        <el-table-column label="联系方式" prop="vendorContact" width="200"/>
        <el-table-column label="银行账户" prop="vendorBankAccount" width="200"/>
      </el-table>
    </el-dialog>
<!--    查询的dialog-->
    <el-dialog v-model="isShowForm"  class="formclass" draggable width="600px">
      <el-form
          :model="searchForm"

      >
        <el-form-item label="供应商名称" prop="vendorName">
          <el-input v-model="searchForm.vendorName"   style="width: 300px" placeholder="请输入供应商名称"/>
        </el-form-item>

        <el-row>
            <el-form-item label="供应商地址" prop="vendorAddress">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="省" prop="province">
                    <el-select v-model="form.province" @change="getProvinces" filterable placeholder="请选择省份" fit-input-width="true"
                               style="width: 150px" prop="province">
                      <el-option
                          v-for="item in locValue.provinces"
                          :key="item.provinceId"
                          :label="item.provinceName"
                          :value="item.provinceName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="10">
                  <el-form-item label="市" prop="city">
                    <el-select v-model="form.city" @change="getCities" placeholder="请选择市"  style="width: 150px" prop="city">
                      <el-option
                          v-for="item in this.locValue.cities"
                          :key="item.cityId"
                          :label="item.cityName"
                          :value="item.cityName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="区" prop="religion" >
                    <el-select v-model="form.religion"  @change="getRegions" placeholder="请选择区"  style="width: 150px;" prop="religion">
                      <el-option
                          v-for="item in locValue.religions"
                          :key="item.regionId"
                          :label="item.regionName"
                          :value="item.regionName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col >
              </el-row>
            </el-form-item>

        </el-row>

            <el-form-item label="供应商法人" prop="vendorJuridicalPerson">
              <el-input v-model="searchForm.vendorJuridicalPerson" style="width: 300px" placeholder="请输入供应商名称"/>
            </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="search">确认</el-button>
        </span>
      </template>
    </el-dialog>
<!-- 添加的表单   -->
    <el-dialog v-model="isShowAddOrUpdateForm"  class="formclassTwo" draggable width="700px">
      <div>
        <el-form
            :model="addOrUpdateForm"
            :rules="rule"
            label-width="100px"
            ref="form"
        >
          <el-form-item label="供应商名称" prop="vendorName">
            <el-input v-model="addOrUpdateForm.vendorName" placeholder="请输入供应商名称"/>
          </el-form-item>
              <el-form-item label="银行账户" prop="vendorBankAccount">
                <el-input v-model="addOrUpdateForm.vendorBankAccount" placeholder="请输入联系人"/>
              </el-form-item>
              <el-form-item  label="供应商地址"  prop="vendorAddress">
                <el-row>
                  <el-col :span="8">
                    <el-form-item prop="province">
                      <el-select v-model="form.province" @change="getProvinces" filterable placeholder="请选择省份" fit-input-width="true"
                                 style="width: 150px; margin-right:10px  " prop="province">
                        <el-option
                            v-for="item in locValue.provinces"
                            :key="item.provinceId"
                            :label="item.provinceName"
                            :value="item.provinceName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item prop="city">
                      <el-select v-model="form.city" @change="getCities" placeholder="请选择市"  style="width: 150px; margin-right:10px  " prop="city">
                        <el-option
                            v-for="item in this.locValue.cities"
                            :key="item.cityId"
                            :label="item.cityName"
                            :value="item.cityName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item  prop="religion" >
                      <el-select v-model="form.religion"  @change="getRegions" placeholder="请选择区"  style="width: 150px;" prop="religion">
                        <el-option
                            v-for="item in locValue.religions"
                            :key="item.regionId"
                            :label="item.regionName"
                            :value="item.regionName">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col >
                </el-row>
              </el-form-item>
          <el-form-item label="详细地址" prop="other">
            <el-input v-model="form.other"  @change="getOthers" placeholder="请输入详细地址"/>
          </el-form-item>
              <el-form-item label="联系人" prop="vendor">
                <el-input v-model="addOrUpdateForm.vendorContactPerson" placeholder="请输入联系人"/>
              </el-form-item>

          <el-form-item label="联系方式" prop="goodPrice">
            <el-input v-model="addOrUpdateForm.vendorContact" placeholder="请输入联系方式"/>
          </el-form-item>
          <el-form-item label="法人" prop="costPrice">
            <el-input v-model="addOrUpdateForm.vendorJuridicalPerson" placeholder="请输入法人"/>
          </el-form-item>
          <el-form-item label="备注" prop="manufacturers">
            <el-input v-model="addOrUpdateForm.note" placeholder="请输入备注"/>
          </el-form-item>

        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addOrUpdate">确认</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import Header from "@/components/Header";
import {CirclePlus, Delete, Edit, MoreFilled, Search} from "@element-plus/icons-vue";
import {request_operation} from "@/util/request";
import {ElMessage} from "element-plus";

export default {
  name: "VendorManage",
  components: {Header},
  data() {
    return {
      Icon:{Search,CirclePlus,Edit,MoreFilled,Delete},
      locValue: {
        provinces:[],
        cities:[],
        religions:[]
      },
      form:{
        province:'',
        city:'',
        religion:'',
        other:'',
        loc:'',
      },
      isShowForm:false,
      searchForm:{
        vendorName:'',
        vendorAddress:'',
        vendorJuridicalPerson:'',
      },
      isShowAddOrUpdateForm:false,

      isEdit:false,
      oid:'',
      pid:'',
      tableData:[
      ],
      multipleSelection:[],
      rowData:[
      ],
      pageSize:10,
      totalSize:100,
      pageNow:1,
      vendorName:'',
      zip:'',
      Visible:false,
      data:{},
      addOrUpdateForm:{
        vendorName:'',
        vendorAddress:'',
        vendorJuridicalPerson:'',
        vendorContactPerson:"",
        vendorContact:"",
        vendorBankAccount:"",
        note:""
      },
      vendorId:'',
      rule:{
        vendorName:[{required:true,message:"必填",trigger: 'blur'}],
        vendorAddress:[{required:true,message:"必填",trigger: 'blur'}],
        vendorJuridicalPerson:[{required:true,message:"必选",trigger: 'blur'}],
        vendorContactPerson:[{required:true,message:"必填",trigger: 'blur'}],
        vendorContact:[{required:true,message:"必选",trigger: 'blur'}],
        vendorBankAccount:[{required:true,message:"必选",trigger: 'blur'}],
        note:''
      }
    }
  },
  methods:{
    clear(){
      this.addOrUpdateForm={
        vendorName:'',
        vendorAddress:'',
        vendorJuridicalPerson:'',
        vendorContactPerson:"",
        vendorContact:"",
        vendorBankAccount:"",
        note:"",

      }

          this.form.loc= this.addOrUpdateForm.vendorAddress
          this.form.province=  this.form.loc.split("-")[0]
          this.form.city=  this.form.loc.split("-")[1]
          this.form.religion= this.form.loc.split("-")[2]
          this.form.other=  this.form.loc.split("-")[3]
    },
    updateForm(){
      this.isEdit=true
      if (this.multipleSelection.length!==0){
        let row = this.multipleSelection
            this.form.loc=row.vendorAddress,
            this.form.province=  this.form.loc.split("-")[0],
            this.form.city=  this.form.loc.split("-")[1],
            this.form.religion= this.form.loc.split("-")[2],
            this.form.other=  this.form.loc.split("-")[3],
        this.addOrUpdateForm={
          vendorName:row.vendorName,
          vendorAddress:row.vendorAddress,
          vendorJuridicalPerson:row.vendorJuridicalPerson,
          vendorContactPerson:row.vendorContactPerson,
          vendorContact:row.vendorContact,
          vendorBankAccount:row.vendorBankAccount,
          note:row.note
        }
        this.vendorId=row.vendorId
        this.isShowAddOrUpdateForm=true
      }else{
        ElMessage('请先选择要修改的供应商！')
      }

    },
    addForm(){
      this.isEdit=false
      this.clear()
      this.isShowAddOrUpdateForm=true
    },

    addOrUpdate(){

      this.$refs['form'].validate((valid) => {
        if (valid) {
          const vendor = {
            vendorName:this.addOrUpdateForm.vendorName,
            vendorAddress:this.form.loc,
            vendorJuridicalPerson:this.addOrUpdateForm.vendorJuridicalPerson,
            vendorContactPerson:this.addOrUpdateForm.vendorContactPerson,
            vendorContact:this.addOrUpdateForm.vendorContact,
            vendorBankAccount:this.addOrUpdateForm.vendorBankAccount,
            note:this.addOrUpdateForm.note
          }
          if(this.isEdit){
            console.log(this.addOrUpdateForm)
           vendor.vendorId=this.vendorId
            request_operation.put("vendor",vendor).then(res=>{
              console.log(res.data)
              if(res.data.code===200){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
              }else{
                this.$message({
                  message: '修改失败',
                  type: 'error'
                });
              }
              this.loadPost()
            })
            this.isEdit=false

          }else{
            console.log("-----------")
            console.log(vendor)
            request_operation.post("vendor",vendor).then(res=>{
              console.log(res.data)
              if(res.data.code===200){
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
              }else{
                this.$message({
                  message: '添加失败',
                  type: 'error'
                });
              }
              this.loadPost()
            })
          }
        this.isShowAddOrUpdateForm=false

        }
      })



    },
    look(row){
      console.log(row)
      this.rowData = []
      this.rowData.push(row)
      this.Visible = true

    },
    deleteForm(){
      console.log(this.multipleSelection)
      if (this.multipleSelection){
        let row = this.multipleSelection
        request_operation.delete("vendor",{
          data: row.vendorId
        }).then(res=>{
          console.log(res.data)
          this.loadPost()
        })
      }

    },
    showForm(){
      this.isShowForm=true
      this.searchForm={
        vendorName:'',
        vendorAddress:'',
        vendorJuridicalPerson:'',
      }
    },
    search(){
      request_operation.post("vendor/page",{
        vendorName:this.searchForm.vendorName,
        vendorAddress:this.form.loc,
        vendorJuridicalPerson:this.searchForm.vendorJuridicalPerson,
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        console.log(res.data)
        this.totalSize = res.data.data.totalRows
        this.tableData = res.data.data.rowData
      })
      this.isShowForm=false
    },
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1080/vendor/page",{
        status:this.status,
        date:this.tvalue,
        type:this.type,
        pageNow:this.pageNow,
        pageSize:this.pageSize,
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
        }

      })
    },

    loadPost(){
      this.$axios.post("http://localhost:1080/vendor/page",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },
    handleSelection(selection){
      this.multipleSelection = selection[0]
    },
    select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },


    getLocations(){
      request_operation.get("/province").then(res=>{
        console.log(res.data);
        this.locValue.provinces=res.data.data
      })
    },
    getProvinces(){
      this.form.city=''
      this.form.religion=''
      this.locValue.cities=this.locValue.provinces.filter((item)=>item.provinceName===this.form.province)[0].cityList
      this.form.loc=this.form.province
      this.addOrUpdateForm.vendorAddress=this.form.loc
    },
    getCities(){
      this.form.religion=''
      this.locValue.religions=this.locValue.cities.filter((item)=>item.cityName===this.form.city)[0].regionList
      this.form.loc=this.form.province+'-'+this.form.city
      this.addOrUpdateForm.vendorAddress=this.form.loc
    },
    getRegions(value){
      this.form.loc=this.form.province+'-'+this.form.city+'-'+this.form.religion
      this.form.regionID=this.locValue.religions.filter((item)=>item.regionName===value)[0].regionId
      this.addOrUpdateForm.vendorAddress=this.form.loc
    },
    getOthers(){
      this.form.loc=this.form.province+'-'+this.form.city+'-'+this.form.religion+'-'+this.form.other
      this.addOrUpdateForm.vendorAddress=this.form.loc
    }

  },
  beforeMount() {
    this.loadPost()
    this.getLocations()
  }
}
</script>

<style scoped>
.head{
  margin: 10px 0;
  text-align: left;
}
/*body .el-table th.gutter {*/
/*  display: table-cell !important*/
/*}*/
.co1{
  background: #77c7d0;

}
.co2{
  background: #d9bf17;
}
.oo{
  background: #97d578
}
/*:deep(.el-table th.el-table__cell:nth-child(1) .cell) {*/
/*  visibility: hidden;*/
/*}*/
</style>